
.html{
    // 开启相对定位
    position: relative;
}
.box{
    width: 100%;
    height: 48px;
    background-color: #000;
}
// 设置顶部导航条的样式
.top-nav-wrapper{
    // 设置左侧导航的样式
    // width: 500px;
    max-width: 1200px;
    // 设置最大宽度
    height: 48px;
    margin: 0 auto;
    background-color: #000000;
    // 设置为弹性盒
    display: flex;
    // 空白内容分布在弹性内容之间
    justify-content:space-between;
    // 设置内边距
    padding: 0 25px;
    // 弹性元素居中
    align-items: center;
// 设置左侧导航的样式
    .left-nav{
        .line{
            // 开启相对定位
            position: relative;
            width: 18px;
            height: 48px;
            li{
                width: 18px;
                height:1px;
                background-color: #C8C8C8;
                // 开启绝对定位
                position: absolute;
                transform-origin: left center;
                // 设置过渡时间
                transition: .3s;
                &:nth-child(1){
                    top: 18px;
                }
                &:nth-child(2){
                    top: 24px;
                }
                &:nth-child(3){
                    top: 30px;
                }
            }
            // 设置鼠标移入三条横线时的变化效果
            &:hover li:nth-child(1){
                // 顺时针旋转45度
                transform: rotateZ(43deg);
            }
            &:hover li:nth-child(2){
                // 设置为透明
                opacity: 0;
            }
            &:hover li:nth-child(3){
                // 逆时针旋转45度
                transform: rotateZ(-43deg);
            }
        }

        // 设置隐藏内容的样式
        .left-nav-content{
            // 开启绝对定位
            position: absolute;
            // 隐藏
            display: none;
            top: 48px;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            padding-top: 50px;
            li{
                padding: 0 10%;
                // 设置文字下面的横线
                &::after{
                    content: '';
                    display: block;
                    height: 1px;
                    width: 100%;
                    margin: 16px auto;
                    background-color: #252525;
                }
                &:hover a{
                    color: rgb(219, 215, 215);
                }
                
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    color: #fff;
                    font-size: 16px;
                }
                &:last-child{
                    a{
                        display: inline-block;
                        width: 16px;
                        height: 100%;
                        margin-right: 7px;
                        i{
                            color: #fff;
                        }
                    }
                    span{
                        color: #fff;
                        font-size: 16px;
                    }                    
                }
            }
        }

        // 设置鼠标移入左侧导航时，让内容显示出来
        &:hover .left-nav-content{
            display: block;
        } 
    }


    // 设置中间部分的logo
    .logo-wrapper{
        a{
            img{
                display: block;
                width: 80px;
            }
        }
    }


    // 设置右侧的用户服务
    .user-info-wrapper{
        a{
            i{
                display: block;
                font-size: 20px;
                color: #C8C8C8;
            }
        }
        &:hover i{
            color: rgb(219, 215, 215);
        }
    }
}





@media screen and (min-width:768px){
    html{

        body{
            .top-nav-wrapper{

                .left-nav{
                    width: 100%;
                    height: 48px;
                    order: 2;
                    .line{
                        display: none;
                    }
                    .left-nav-content{
                        // 取消绝对定位
                        position: static;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        padding-top: 0;
                        display: flex;
                        justify-content: space-around;
                        li{

                            line-height: 48px;
                            height: 48px;
                            padding: 0;
                            // 设置文字下面的横线
                            &::after{
                                content: '';
                                display: none;
                                height: 1px;
                                width: 100%;
                                margin: 16px auto;
                                background-color: #252525;
                            }
                            &:hover a{
                                color: rgb(219, 215, 215);
                            }
                            
                            a{
                                display: block;
                                width: 100%;
                                height: 100%;
                                color: #fff;
                                font-size: 16px;
                            }
                            &:last-child{
                                a{
                                    display: inline-block;
                                    width: 16px;
                                    height: 100%;
                                    margin-right: 0;
                                    i{
                                        color: #fff;
                                    }
                                }
                                span{
                                    display: none;
                                    color: #fff;
                                    font-size: 16px;
                                }                    
                            }
                        }
                    }
                    &:hover .left-nav-content{
                        display:flex;
                    } 
                }
                .logo-wrapper{
                    order: 1;
                }
                .user-info-wrapper{
                    order: 3;
                }
            }
        }
    }
}